<template>
  <div>
    <!-- <div>初始值为：{{ count }}</div> -->
    <div>{{ $store.getters.showNum }}</div>
    <button @click="sub">-1</button>
    <button @click="subn">-n</button>
    <button @click="subasync">subAsync</button>
    <p :style="{color:action, backgroundColor:action}">{{ action }}</p>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {
      bool: false,
    };
  },
  methods: {
    ...mapMutations(["subone", "subo"]),
    ...mapActions(["subAsync"]),
    sub() {
      this.subo();
      //   this.$store.commit("sub");
    },
    subn() {
      this.subone(5);
      // this.$store.commit('sub0',5)
    },
    subasync() {
      this.subAsync(5);
      // this.$store.dispatch('subAsync')
    },
  },
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["showNum"]),
    action() {
      if (this.bool) {
        return "blue";
      } else {
        return "red";
      }
    },
    
  },
};
</script>
